<template>
  <div class="m-container">
    <!-- 页面头部 start -->
    <div class="m-page-header">
      <h1 class="m-header__title">董事中心</h1>
      <div class="m-header__info">
        <p class="m-header__info__nickname">{{ realname }}</p>
        <div v-if="is_agent == 1" class="m-header__info__grade">
          <i class="iconfont icon-huangguan"></i>
          <p class="g-ml--5">董事</p>
        </div>
      </div>
    </div>
    <!-- 页面头部 end -->
    <!-- 立即提现 start -->
    <div class="m-card m-card--momey">
      <div class="m-momey__item">
        <p class="m-momey__item__num">{{ total_agent_earn }}</p>
        <p class="m-money__item__title">累计佣金</p>
      </div>
      <!-- <div class="m-momey__item">
        <p class="m-momey__item__num">5555.00</p>
        <p class="m-money__item__title">可提现佣金</p>
      </div> -->
      <!-- <div class="m-momey__item m-momey__item--btn">
        <van-button @click="goToWithdrawal" type="primary" size="small"
          >立即提现</van-button
        >
      </div> -->
    </div>
    <!-- 立即提现 end -->
    <!-- 数据列表 start -->
    <div class="m-card m-card--data">
      <van-row type="flex">
        <van-col span="12">
          <div @click="goToMyTeam" class="m-data__item p-border-b--gray">
            <i class="iconfont icon-tubiao-" style="color:#FF8564"></i>
            <p class="g-fs--14 g-c--gray">我的团队</p>
            <p class="g-fs--12 g-c--gray">
              <b class="g-c--red g-mr--5">{{ group_member_count }}</b
              >人
            </p>
          </div>
        </van-col>
        <van-col span="12">
          <div class="m-data__item p-border-b--gray">
            <i class="iconfont icon-yue" style="color:#E98F36"></i>
            <p class="g-fs--14 g-c--gray">分销佣金</p>
            <p class="g-fs--12 g-c--gray">
              <b class="g-c--red g-mr--5">{{ total_agent_earn }}</b
              >元
            </p>
          </div>
        </van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="12">
          <div class="m-data__item p-border-b--gray">
            <i class="iconfont icon-jiekuanmingxi" style="color:#FFCA3A"></i>
            <p class="g-fs--14 g-c--gray">佣金明细</p>
            <p class="g-fs--12 g-c--gray">佣金明细</p>
          </div>
        </van-col>
        <van-col span="12">
          <div class="m-data__item p-border-b--gray">
            <i
              class="iconfont icon-jiaoyimingxichaxun"
              style="color:#FF5B5B;"
            ></i>
            <p class="g-fs--14 g-c--gray">分销订单</p>
            <p class="g-fs--12 g-c--gray">
              <b class="g-c--red g-mr--5">{{ group_member_order_count }}</b
              >个
            </p>
          </div>
        </van-col>
      </van-row>
      <van-row type="flex">
        <van-col span="12">
          <div class="m-data__item">
            <i class="iconfont icon-fensi" style="color:#22BEC8"></i>
            <p class="g-fs--14 g-c--gray">我的粉丝</p>
            <p class="g-fs--12 g-c--gray">
              <b class="g-c--red g-mr--5">0</b>人
            </p>
          </div>
        </van-col>
        <van-col span="12">
          <div @click="showShareImg" class="m-data__item">
            <i class="iconfont icon-erweima" style="color:#744CFF"></i>
            <p class="g-fs--14 g-c--gray">二维码</p>
            <p class="g-fs--12 g-c--gray">推广二维码</p>
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 数据列表 end -->
    <!-- 推广二维码弹窗 -->
    <van-popup v-model="show_share"
      ><img src="~_a/img/share.png" alt=""
    /></van-popup>
  </div>
</template>

<script>
import { Button, Row, Col, Popup } from "vant";
import { userModel } from "@/api";
import { mapState } from "vuex";

export default {
  name: "boss",
  components: {
    "van-button": Button,
    "van-row": Row,
    "van-col": Col,
    "van-popup": Popup
  },
  data() {
    return {
      group_member_count: 0,
      group_member_order_count: 0,
      total_agent_earn: 0,
      show_share: false
    };
  },
  computed: {
    ...mapState({
      parent_number: state =>
        (state.userInfo && state.userInfo.parent_number) || "",
      bank: state => (state.userInfo && state.userInfo.bank) || "",
      bankcard: state => (state.userInfo && state.userInfo.bankcard) || "",
      id_card: state => (state.userInfo && state.userInfo.id_card) || "",
      mobile: state => (state.userInfo && state.userInfo.mobile) || "",
      is_agent: state => (state.userInfo && state.userInfo.is_agent) || "",
      realname: state => (state.userInfo && state.userInfo.realname) || "",
      receiver_address: state =>
        (state.userInfo && state.userInfo.receiver_address) || "",
      receiver_area_name: state =>
        (state.userInfo && state.userInfo.receiver_area_name) || ""
    })
  },
  created() {
    this.getAgentCenterInfo();
  },
  methods: {
    /* 获取董事中心信息 */
    getAgentCenterInfo() {
      userModel._getAgentCenterInfo().then(res => {
        console.log(res);
        this.group_member_count = res.group_member_count;
        this.group_member_order_count = res.group_member_order_count;
        this.total_agent_earn = res.total_agent_earn;
      });
    },
    goToWithdrawal() {
      this.$router.push({
        name: "withdrawal"
      });
    },
    goToMyTeam() {
      this.$router.push({
        name: "my_team",
        params: {
          active: 0
        }
      });
    },
    /* 显示推广二维码 */
    showShareImg() {
      this.show_share = true;
    }
  }
};
</script>

<style lang="scss">
.m-card--momey {
  margin-top: -55px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.m-momey__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.m-momey__item__num {
  font-size: 16px;
  color: #000;
}
.m-money__item__title {
  font-size: 12px;
  color: #999;
}
.m-card--data {
  padding-top: 20px;
  padding-bottom: 20px;
}
.m-data__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 0;
  .iconfont {
    font-size: 40px;
  }
}
.p-border-b--gray {
  border-bottom: 1px solid #eee;
}
</style>
